﻿<UserControl x:Class="Microsoft.Samples.Kinect.BasicInteractions.CategorySelectionControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Microsoft.Samples.Kinect.BasicInteractions"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
    <UserControl.Resources>
        <Storyboard x:Key="EnableGridColor">
            <ColorAnimation BeginTime="0:0:1" Duration="0:0:1" To="White" Storyboard.TargetProperty="Color"
                            Storyboard.TargetName="ItemGridBackground" />
        </Storyboard>
        <Storyboard x:Key="DisableGridColor">
            <ColorAnimation To="{StaticResource DisabledColor}" Storyboard.TargetProperty="Color"
                            Storyboard.TargetName="ItemGridBackground" />
        </Storyboard>
        <Style TargetType="{x:Type ScrollViewer}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                        <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                                    CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                                                    Margin="{TemplateBinding Padding}" />

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>

        <ListBox x:Name="CategoryListBox"  Margin="10,50,10,20"
                 ItemsSource="{Binding Categories, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CategorySelectionControl}}}"
                 BorderThickness="0" Background="{x:Null}" SelectionMode="Multiple"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"
                 HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Stretch"
                 VerticalContentAlignment="Stretch">
            <ListBox.Style>
                <Style TargetType="{x:Type ListBox}">
                    <Setter Property="IsHitTestVisible" Value="False" />
                    <Setter Property="Opacity" Value="0" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectedCategory, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CategorySelectionControl}}}" Value="{x:Null}">
                            <Setter Property="IsHitTestVisible" Value="True" />
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="FadeIn">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ListBox.Style>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Margin" Value="30" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Stretch" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <local:HoverDwellButton x:Name="Button" HoverClick="Button_HoverClick" SoundOnEnter="slot_roll_on.wav"
                                        SoundOnClick="snd_buttonselect.wav" Height="300" Width="345" Style="{StaticResource EnlargingHoverDwellButton}"
                                        VerticalAlignment="Top">
                        <local:HoverDwellButton.RenderTransform>
                            <ScaleTransform ScaleX="1.0" ScaleY="1.0" />
                        </local:HoverDwellButton.RenderTransform>
                        <Grid x:Name="ButtonGrid">
                            <Grid.Background>
                                <SolidColorBrush x:Name="ItemGridBackground" Color="Transparent" />
                            </Grid.Background>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="100" />
                                <RowDefinition Height="200" />
                            </Grid.RowDefinitions>
                            <Border Grid.Row="1" x:Name="ImageBorder" BorderBrush="{StaticResource SelectedColorBrush}"
                                    BorderThickness="0">
                                <Image x:Name="img" DataContext="{Binding ContentImage}" Margin="1" Source="{Binding}" RenderOptions.BitmapScalingMode="HighQuality"
                                       VerticalAlignment="Top" Stretch="UniformToFill">
                                    <Image.Style>
                                        <Style>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding }" Value="{x:Null}">
                                                    <DataTrigger.EnterActions>
                                                        <BeginStoryboard>
                                                            <Storyboard Storyboard.TargetProperty="Opacity">
                                                                <DoubleAnimation From="0" To="1" Duration="0:0:0.5" />
                                                            </Storyboard>
                                                        </BeginStoryboard>
                                                    </DataTrigger.EnterActions>
                                                    <DataTrigger.ExitActions>
                                                        <BeginStoryboard>
                                                            <Storyboard Storyboard.TargetProperty="Opacity">
                                                                <DoubleAnimation From="1" To="0" Duration="0:0:0.5" />
                                                            </Storyboard>
                                                        </BeginStoryboard>
                                                    </DataTrigger.ExitActions>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </Border>
                            <TextBlock x:Name="CategoryTitle" Text="{Binding Title}" Foreground="Black"
                                       FontFamily="Segoe UI" FontWeight="Light" TextAlignment="Left" VerticalAlignment="Bottom" HorizontalAlignment="Left"
                                       Margin="1,0,0,10" FontSize="40" />
                            <!--<Viewbox Grid.Row="0" HorizontalAlignment="Left" Margin="0,0">
                            </Viewbox>-->
                        </Grid>
                    </local:HoverDwellButton>
                    <DataTemplate.Triggers>
                        <DataTrigger
                            Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource EnableGridColor}" />
                            </DataTrigger.EnterActions>
                            <!--<DataTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource DisableGridColor}" />
                            </DataTrigger.ExitActions>-->
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsSelected, ElementName=Button}" Value="true">
                            <Setter TargetName="CategoryTitle" Property="TextBlock.Foreground"
                                    Value="{StaticResource SelectedColorBrush}" />
                            <Setter TargetName="CategoryTitle" Property="TextBlock.FontWeight" Value="Bold" />
                            <Setter TargetName="ImageBorder" Property="Border.BorderThickness" Value="8" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsHoveredOver, ElementName=Button}" Value="true">
                            <Setter TargetName="CategoryTitle" Property="TextBlock.Foreground"
                                    Value="{StaticResource SelectedColorBrush}" />
                            <Setter TargetName="ImageBorder" Property="Border.BorderThickness" Value="4" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


        <local:StorySelectionControl x:Name="CategoryContent" Margin="0,10,0,0" Opacity="0" IsHitTestVisible="False"
                                     Category="{Binding Path=SelectedCategory, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CategorySelectionControl}}}" />
    </Grid>
</UserControl>